import React from 'react'
import Action from '../../../action/action'
import Store from '../../../store/store'
import Reflux from 'reflux'
import ReactMixin from 'react-mixin'

import OrderItem from '../../../component/orderItem/orderItem'
import MessageBox from '../../../component/messageBox/messageBox'
import EmptyBox from '../../../component/emptyBox/emptyBox'
import SideNavBar from  '../../../component/sideNavBar/sideNavBar'

export default class MyOrder extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userOrder : {},
            navBarSelectIndex : 0,
            list : [],
            cancelOrder :false,
            surePick : false,
        }
    }
    componentDidMount(){
        Action.getNavBarSelectIndex();
        Action.getUserOrder(()=>{
            this.navBarSelect(this.state.navBarSelectIndex)
        });
    }

    navBarSelect(i){
        let _navBarSelectIndex;
        switch (i){
            case 0 : _navBarSelectIndex = 0; break; //待付款
            case 1 : _navBarSelectIndex = 1; break; //待发货
            case 2 : _navBarSelectIndex = 2; break; //待收货
            case 3 : _navBarSelectIndex = 3; break; //待自提
            case 4 : _navBarSelectIndex = 4; break; //待使用
            case 5 : _navBarSelectIndex = 5; break; //待评价
            case 6 : _navBarSelectIndex = 6; break; //已完成
            case 7 : _navBarSelectIndex = 7; break; //已过期
            case 8 : _navBarSelectIndex = 8; break; //已取消
        }
        this.setState({
            navBarSelectIndex : _navBarSelectIndex,
        });
        window.location.href = `/#/my/order?${_navBarSelectIndex}`;
        this.selectList(_navBarSelectIndex)
    }

    selectList(index){
        let _list = [];
        let userOrder = this.state.userOrder;
        switch(index){
            case 0 :
                userOrder.waitPay.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="待付款"
                                          btn1="取消订单"
                                          btn1Click={this.cancelOrderBox.bind(this)}
                                          btn2="付款"
                                          key={i}
                                          _listIndex={i}/>)
                });
                break;
            case 1 :
                userOrder.waitSend.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="待发货"
                                          key={i}
                                          _listIndex={i}/>)
                });
                break;
            case 2 :
                userOrder.waitReceipt.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="待收货"
                                          btn2="确定收货"
                                          btn2Click={this.surePickBox.bind(this)}
                                          key={i}
                                          _listIndex={i}/>)
                });
                break;
            case 3 :
                userOrder.waitPick.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="待自提"
                                          btn2="提货"
                                          key={i}
                                          _listIndex={i}/>)
                });
                break;
            case 4 :
                userOrder.waitUse.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="待使用"
                                          btn2="使用"
                                          key={i}
                                          _listIndex={i}/>)
                });
                break;
            case 5 :
                userOrder.waitEvaluate.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="待评价"
                                          btn1="再次购买"
                                          btn2="评价"
                                          key={i}
                                          _listIndex={i}/>)
                });
                break;
            case 6 :
                userOrder.hadDone.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="已完成" btn2="再次购买" key={i}/>)
                });
                break;
            case 7 :
                userOrder.hasPass.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="已过期" btn2="再次购买" key={i}/>)
                });
                break;
            case 8 :
                userOrder.hasCancel.map((item,i)=>{
                    _list.push(<OrderItem item={item}
                                          index={index}
                                          type="已取消" btn2="再次购买" key={i}/>)
                });
                break;
        }
        this.setState({
            list : _list
        })
    }
    //取消订单弹框
    cancelOrderBox(){
        this.setState({
            cancelOrder: !this.state.cancelOrder
        })
    }
    //确认收货弹框
    surePickBox(){
        this.setState({
            surePick: !this.state.surePick
        })
    }
    render(){
        return(
            <div className="myOrder">
                <header>
                    <ul>
                        <li className={this.state.navBarSelectIndex === 0 ? "active" : ""} onClick={this.navBarSelect.bind(this,0)}><span>待付款</span></li>
                        <li className={this.state.navBarSelectIndex === 1 ? "active" : ""} onClick={this.navBarSelect.bind(this,1)}><span>待发货</span></li>
                        <li className={this.state.navBarSelectIndex === 2 ? "active" : ""} onClick={this.navBarSelect.bind(this,2)}><span>待收货</span></li>
                        <li className={this.state.navBarSelectIndex === 3 ? "active" : ""} onClick={this.navBarSelect.bind(this,3)}><span>待自提</span></li>
                        <li className={this.state.navBarSelectIndex === 4 ? "active" : ""} onClick={this.navBarSelect.bind(this,4)}><span>待使用</span></li>
                        <li className={this.state.navBarSelectIndex === 5 ? "active" : ""} onClick={this.navBarSelect.bind(this,5)}><span>待评价</span></li>
                        <li className={this.state.navBarSelectIndex === 6 ? "active" : ""} onClick={this.navBarSelect.bind(this,6)}><span>已完成</span></li>
                        <li className={this.state.navBarSelectIndex === 7 ? "active" : ""} onClick={this.navBarSelect.bind(this,7)}><span>已过期</span></li>
                        <li className={this.state.navBarSelectIndex === 8 ? "active" : ""} onClick={this.navBarSelect.bind(this,8)}><span>已取消</span></li>
                    </ul>
                </header>
                {this.state.list.length>0 ? this.state.list : <EmptyBox type="noOrder" size="45%"/>}
                {this.state.cancelOrder ? <MessageBox type="0"
                                                      text="确认要取消订单吗?"
                                                      cancel={this.cancelOrderBox.bind(this)}/>: null }
                {this.state.surePick ? <MessageBox type="0"
                                                   text="确认收货吗?"
                                                   cancel={this.surePickBox.bind(this)}/>: null }
                <SideNavBar/>
            </div>
        )
    }
}
ReactMixin.onClass(MyOrder,Reflux.connect(Store));